/**
 * Created with Vim7.3 Mac
 * @fileOverview : 
 * @author : Lyle lylechen2014@gmail.com
 * @since : 2016-08-24 16:22:17
 * @filename : src/components/userProfile.js
 * @version : 
 * @description : 
 */


import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    StatusBar,
    TouchableOpacity,
    ScrollView,
    ActivityIndicator
} from 'react-native';

let { width, height } = Utils.size;
import NetWorkImg from '../common/networkImg';
import Slider from '../common/slider';
import UserProfileAbout from './userProfileAbout';
import UserProfileDetails from './userProfileDetails';
import UserProfilePrivateAlbum from './userProfilePrivateAlbum';


let userInfo = null;

class UserProfile extends Component {

    constructor(props) {
        super(props);
        let userObj = JSON.parse(Store.session_user_id);
        this.state = {
            slider : false,
            index : 0,
            tab: 0,
            arr: [],
            touchPoint: null,
            userInfo:false,
        };
    }

    componentDidMount() {
        this.fetchUserInfo(this.props.route.userId);
    }

    getPhotoImg() {
        let jsx = <View style={styles.imgDesRight}>
                  <Image style={styles.photoIcon} source={require('../img/ico_photo.png') }/>
                  <Text style={styles.imgDesText}>{this.getPicNum()}</Text>
                  </View>
        return (jsx);
    }

    renderUserInfo() {
        let slider = this.state.slider ? this.createSlider() : null;

        let jsx =   <View style={styles.userProfile}>
                        <ScrollView>
                        <View style={styles.headImg}>
                            <TouchableOpacity  ref={'photo'}  key = {i} onPress={()=>this.openPhoto(0)}  activeOpacity={1}>
                                <NetWorkImg
                                    source={this.getPhoto()} 
                                    style={styles.userProfileIcon}
                                    size={'large'}
                                    imgSize={true}
                                    boxHeight={height}
                                />
                            </TouchableOpacity>
                            <View style={styles.imgDiv}></View>
                            <View style={styles.imgDes}>
                                  <Text style={styles.imgDesText}>
                                    {this.getImgDes()}
                                  </Text>
                                  {this.getPicNum() ? this.getPhotoImg() : null}
                            </View>
                        </View>
                        <View style={styles.tabHead}>
                            <TouchableOpacity  style={this.getIndexTabNameStyle(0)}  activeOpacity = {1} onPress={()=>this.goToScrollTo(0)}>
                                <Text style={this.getIndexTextColor(0)}> About </Text>
                            </TouchableOpacity>
                            <TouchableOpacity style={this.getIndexTabNameStyle(1)}  activeOpacity = {1} onPress={()=>this.goToScrollTo(1)}>  
                                <Text style={this.getIndexTextColor(1)}> Details </Text>
                            </TouchableOpacity>
                            {     
                                parseInt(userInfo.private_pic_num) > 0 
                                ?
                                <TouchableOpacity style={this.getIndexTabNameStyle(2)}  activeOpacity = {1} onPress={()=>this.goToScrollTo(2)}>  
                                   <Text style={this.getIndexTextColor(2)}> Private Album </Text>
                                </TouchableOpacity> 
                                : null
                            }
                        </View>         

                        <View style={styles.tabInfo}>
                            {this.getTab(this.state.tab)}
                        </View>
                        </ScrollView>  
                        {slider}
                    </View>
        return (jsx);
    }

    getTab(tab) {

        let jsx = null;
        if (tab == 0) {
            jsx= <View style={styles.userProfileTabContent}>
                    <UserProfileAbout userInfo = {userInfo}/>
                 </View>
        } else if (tab == 1) {
            jsx = <View style={styles.userProfileTabContent}>
                    <UserProfileDetails userInfo = {userInfo}/>
                  </View>
        } else if (tab == 2) {
            if (parseInt(userInfo.private_pic_num) > 0 )  {
                jsx =   <View style={styles.userProfileTabContent}>
                             <UserProfilePrivateAlbum userInfo = {userInfo} />
                        </View>
            }
            //show pic
        }
        return jsx;
    }

    render() {
        return (
            <View style={styles.container}>
                {this.state.userInfo ? this.renderUserInfo() : this.createLoading()}
            </View>
        );
    }

    fetchUserInfo(usr_id) {
        let tthis = this;
        Share.fetchMain({
            url : 'user_profile',
            data: {prof_id:usr_id},
            callback : function(data) {
                console.log(data);
                if (data.errcode == 121) {
                    alert('get userProfile is error!');
                } else {
                    userInfo = data;
                    tthis.setState({
                        arr: data.pictures,
                        userInfo: true,
                    });
                }
            }
        })
    }

    createLoading() {
         let jsx = <View style={styles.loading}>
                       <ActivityIndicator size={'large'}/>
                   </View>
        return (jsx);
    }

    createSlider() {
        let jsx = <Slider ref='slider' touchPoint={this.state.touchPoint}  arr = {this.state.arr}  index = {this.state.index} callbackParent={this.sonCallback.bind(this)}/>
        return (jsx);
    }

    openPhoto(index) {
        this.refs["photo"].measure((fx, fy, width, height, px, py) => {
            StatusBar.setHidden(true);
            this.setState({
                slider : true,
                index : parseInt(index),
                touchPoint : {
                    x: px,
                    y: py,
                    width: width,
                    height: height, 
                }
            });
        });  
    }

    sonCallback() {
        this.setState({
            slider : false,
            index : 0,
        });     
    }

    getIndexTabNameStyle(tab) {
        let tabNameStyle = styles.tabNameView;
        if (tab == this.state.tab && tab == 0) {
            tabNameStyle  = [styles.tabNameView,styles.tabNameIndex,{borderLeftWidth:0}];
        } else if (tab == this.state.tab) {
            tabNameStyle  = [styles.tabNameView,styles.tabNameIndex];
        }
        return tabNameStyle;
    }

    getIndexTextColor(tab) {
        let tabTextStyle = styles.tabName;
        if (tab == this.state.tab) {
            tabTextStyle = [styles.tabName,{color:'#56ade0'}];
        }
        return tabTextStyle;
    }

    getPhoto() {
        let pic = {uri:"http://s.tmatch.com/de/picssb75/3/873/1707873-1118756.jpg"};
        if (userInfo.pictures.length) {
            pic = {uri:userInfo.pictures[0].picture};
        } 
        return pic;
    }

    goToScrollTo(index) {
        this.setState({tab:index});
    }

    getImgDes() {
        let lsName = userInfo.account.city;
        let countryName = userInfo.account.country_name;

        if (countryName == 'United States') {
            countryName = 'U.S';
        } else if (countryName == 'United Kingdom') {
            countryName = 'U.K';
        }

        let genderName = Share.searchSelect('local_gender',userInfo.account.gender);

        let location = [];

        [genderName,userInfo.account.city, userInfo.account.state_name/*, countryName*/].map(function(val){
            if(val) location.push(val);
        });
        if (location.length === 1) {
            location.push(countryName);
        }
        return userInfo.account.age+" ● "+location.join(', ');
    }

    getPicNum() {
        let str = '';
        if (userInfo.pictures.length) {
            str = "1/" + userInfo.pictures.length;
        } else {
            str = null;
        }
        return str;
    }
}

const styles = StyleSheet.create({

     container: {
        width:width,
        height:height,
        flex: 1,
        backgroundColor: '#fff',
     },

     userProfile: {
        width:width,
        height:height-60,
     },

     loading: {
        top:0,
        left:0,
        position:'absolute',
        width:width,
        height:height-60,
        backgroundColor:'#fff',
        alignItems: 'center',
        justifyContent: 'center',  
     },

     headImg: {
        width:width,
        height:width*2/3,
        alignItems: 'center',
        justifyContent: 'center', 
        /* 
        alignItems: 'flex-start',
        justifyContent: 'flex-start', 
        */
        overflow:'hidden',
     },

    tabInfo: {
        flex:1,
        width:width,
    },

    tabHead: {
        height:40,
        flexDirection: 'row',
        backgroundColor:'#fff',
    },

    imgDiv: {
        width:width,
        height:30,
        backgroundColor:'#000',
        position:'absolute',
        bottom:0,
        opacity:0.6,
     },

     imgDes: {
        width:width,
        height:30,
        position:'absolute',
        backgroundColor:'transparent',
        bottom:0, 
        justifyContent: 'space-between',
        marginLeft:5,  
        flexDirection: 'row',
        alignItems:'center'
     },

     imgDesText: {
        color:'#fff',
     },

     imgDesRight: {
        flexDirection: 'row',
        marginRight:15,
         alignItems:'center'
     },

     tabNameView: {
        marginTop:10,
        flex:1,
        borderColor: '#ccc',
        borderLeftWidth:1,
        borderBottomWidth:1,
     },

    tabName: {     
        textAlign:'center',
        lineHeight:20, 
        color:'#666'
    },

    tabNameIndex: {
        borderBottomWidth:2,
        borderBottomColor:'#56ade0',
    },

    tabInfo: {
        flex:1,
        width:width,
    },

    photoIcon: {
        width:15,
        height:12,
        marginRight:10,
    },

    userProfileTabContent: {
        flex:1,
        width:width,
    },

    userProfileIcon: {
 
    }

});

export default UserProfile;

